<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";
	import {
		searchDataZhbz
	} from "@/api/search";
	import {
		addOrUpdateZhbz
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;
	const editorRef = shallowRef();
	const editorRef1 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataZhbz({
			m: "能力现状-组织综合保障的有利条件和不利因素"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "有利条件")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "不利因素")?.v || "";
		})
	};

	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"运输运力方面，本级按每日运送XX批，XX日内可运送疏散人员(客车按XX座计算)XX万人，超过城市人口的XX%，能够满足需要。生活物资方面，按每人每天消耗米XXkg/天、面XXkg/天计算，本级主食约XX万kg，能够保障XX万人、XX天，能够满足需要。生活物资市场供应方面，本级主食约XX万kg，能够保障XX万人、XX天，能够满足需要。经费保障方面，本级储备生活保障经费XX亿元，可为城市居民提供一个月的生活费，能够满足需要。"
	);

	const valueHtml1 = ref(
		"人员防护工程方面，可用面积XX㎡，人均防护面积为XX㎡，与国家建设标准人均防护面积0.85㎡相差较大，不能满足需要。掩蔽场所方面，本级辖区内就近可用的掩蔽场所，人均面积XX㎡，平均人员间隔距离不足XX米，不能满足需要。疏散地域方面，疏散地域人口XX人，城区需疏散人口XX人，超过驻地人口XX，不能满足需要。医疗救护方面，本级现有医护人员XX人，不能满足需要。共储备帐篷XX顶，受灾人数为城区总人口数XX%、每XX人共用1顶帐篷计算，共需帐篷XX顶，不能满足需求。核化保障方面，没有核化检测专业队、核化洗消专业队，不能执行任务，不能满足需要。"
	)

	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateZhbz({
					m: "能力现状-组织综合保障的有利条件和不利因素",
					data: [{
							k: "有利条件",
							v: valueHtml.value,
						},
						{
							k: "不利因素",
							v: valueHtml1.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();

	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		if (!editor) return;
		if (!editor1) return;
		editor.destroy();
		editor1.destroy();
	});
</script>
<template>
	<div class="">
		<FirstTitle name="有利条件" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="不利因素" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>



		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>